<template>
	<div>
		<div class="head">
			<h3>销售金额统计</h3>
			<div class="block">
				<el-date-picker
					v-model="value2"
					type="daterange"
					align="right"
					unlink-panels
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:picker-options="pickerOptions"
					size="small"
				>
				</el-date-picker>
			</div>
			<div class="img">
				<img
					src="https://z3.ax1x.com/2021/05/13/g05KKO.png"
					width="827"
					height="361"
					alt=""
				/>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			pickerOptions: {
				shortcuts: [
					{
						text: "最近一周",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(
								start.getTime() - 3600 * 1000 * 24 * 7
							)
							picker.$emit("pick", [start, end])
						},
					},
					{
						text: "最近一个月",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(
								start.getTime() - 3600 * 1000 * 24 * 30
							)
							picker.$emit("pick", [start, end])
						},
					},
					{
						text: "最近三个月",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(
								start.getTime() - 3600 * 1000 * 24 * 90
							)
							picker.$emit("pick", [start, end])
						},
					},
				],
			},
			value1: "",
			value2: "",
		}
	},
}
</script>

<style lang="scss" scoped>
div {
	.head {
		h3 {
			font-size: 13px;
			color: #333;
			float: left;
			margin-left: 28px;
		}
		.block {
			float: right;
		}
	}
	.img {
		position: relative;
		top: 20px;
		left: 120px;
		left: 120px;
	}
}
</style>
